<template>
    <header class="header">
        <h1>todos</h1>
        <input
            class="new-todo"
            placeholder="What needs to be done?"
            autofocus
            v-model.trim="todo"
            @keyup.enter="datatodo"
        />
    </header>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios'
import { assth, useMainStore } from '../store/index'

//定义响应式数据
var todo = ref('')

//添加
const datatodo = async function () {
    // 按回车键绑定事件，获取到输入框的值，之后添加
    // 获取到他的状态
    const addtodo: assth = {
        id: 0,
        title: '',
        status: false
    }
    // 获取状态实例对象
    const mainstore = useMainStore()
    //获取容器仓库的数据
    var todoArr = mainstore.todoList
    // 判断它的长度，如果为0的话，保留最后一个id的数据
    if (todoArr.length <= 0) {
        addtodo.id = 1
    } else {
        //获取最后一个数据的长度
        var arrtag = todoArr.length - 1
        //把容器仓库最后一个长度的id+1赋值给addtodo的id
        addtodo.id = todoArr[arrtag].id + 1
        //把响应式的内容赋值给addtodo的title
    }
    addtodo.title = todo.value
    if (todo.value != '') {
        // 需要获取posts列表，个数，计算后获取id
        let { data, status } = await axios.post('http://localhost:3004/posts', addtodo)
        //可以直接用push添加，建议使用添加到容器仓库里面这边在调用
        //判断值和状态获取成功了没，之后清空
        if (data && status == 201) {
            mainstore.addtodopush(data)
            todo.value = ''
        }
    }
}
</script>

<style></style>